<template>
  <div>
    <div class="your_scores_container">
      <header class="your_scores">
        <span class="score_num">{{ score }}</span
        ><span class="fenshu">分！</span>
      </header>
      <div class="result_tip">{{ scoreTips }}</div>
    </div>

    <div class="share_button" @click="showCover"></div>

    <div class="share_code">
      <header class="share_header">用时 {{ allTime }} 秒</header>
      <br />
      <van-button type="primary" to="/" plain block>返回</van-button>
    </div>

    <div class="share_cover" v-show="showHide" @click="showCover">
      <img src="./../assets/5-2.png" class="share_img" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Score',
  data() {
    return {
      showHide: false, //是否显示提示
      score: 0,
      scoreTips: '', //分数提示
      rightAnswer: [2, 7, 12, 13, 18], //正确答案
      scoreTipsArr: [
        '你说，是不是把知识都还给小学老师了？',
        '还不错，但还需要继续加油哦！',
        '不要嘚瑟还有进步的空间！',
        '智商离爆表只差一步了！',
        '你也太聪明啦，葡萄之家欢迎你！'
      ]
    }
  },
  computed: {
    ...mapState(['answerId', 'allTime'])
  },
  created() {
    this.computedScore()
    this.getScoreTip()
    document.body.style.backgroundImage = 'url(./4-1.jpg)'
  },
  methods: {
    computedScore() {
      this.answerId.forEach((item, index) => {
        if (item === this.rightAnswer[index]) {
          this.score += 20
        }
      })
    },
    showCover() {
      this.showHide = !this.showHide
    },
    getScoreTip() {
      let index = Math.ceil(this.score / 20) - 1
      this.scoreTips = this.scoreTipsArr[index]
    }
  }
}
</script>

<style lang="less">
body {
  background-image: url(../assets/4-1.jpg);
  padding-top: 1.2rem;
}
.your_scores_container {
  width: 9.7rem;
  height: 9.1rem;
  background: url(../assets/4-2.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0;
  position: relative;
  .your_scores {
    position: absolute;
    width: 100%;
    text-indent: 3.3rem;
    top: 4.7rem;
    font-size: 1.4rem;
    font-weight: 900;
    -webkit-text-stroke: 0.05rem #412318;
    font-family: 'Microsoft YaHei';
    .score_num {
      font-family: Tahoma, Helvetica, Arial;
      color: #a51d31;
    }
    .fenshu {
      color: #a51d31;
    }
  }
  .result_tip {
    position: absolute;
    top: 7rem;
    width: 9rem;
    left: 0.6rem;
    color: #3e2415;
    font-size: 0.65rem;
    text-align: center;
  }
}
.share_button {
  width: 6.025rem;
  height: 2.4rem;
  margin: 0.8rem auto 0;
  background: url(../assets/4-3.png) no-repeat 0.4rem 0;
  background-size: 5.825rem 100%;
}
.share_code {
  width: 5.3rem;
  margin: 1.5rem auto 0;
  .share_header {
    color: #664718;
    font-size: 1rem;
    font-family: 'Microsoft YaHei';
    font-weight: 500;
    text-align: center;
  }
  .code_img {
    height: 5.3rem;
    width: 5.3rem;
    margin-top: 0.5rem;
  }
}
.share_cover {
  position: fixed;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background: url(../assets/5-1.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.92;
}
.share_img {
  height: 10.975rem;
  width: 11.95rem;
  position: fixed;
  top: 0.5rem;
  left: 50%;
  margin-left: -5.975rem;
}
</style>
